Here's a complete HTML page designed to showcase jQuery concepts in a modern, visually appealing way:

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 全面指南 | 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        
        .hero {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
            color: white;
        }
        
        .card {
            transition: all 0.3s ease;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .code-block {
            background: #f8f9fa;
            border-left: 4px solid #6e8efb;
            font-family: 'Courier New', Courier, monospace;
        }
        
        .dropdown-content {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
            opacity: 1;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .selector-highlight {
            background-color: #fff2cc;
            padding: 0.2rem 0.4rem;
            border-radius: 0.25rem;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero py-20 px-4 text-center">
        <div class="max-w-4xl mx-auto">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">jQuery 全面指南</h1>
            <p class="text-xl mb-8 opacity-90">Write less, do more — 用更少的代码，做更多的事情</p>
            <div class="flex justify-center space-x-4">
                <a href="#intro" class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-indigo-50 transition">开始学习</a>
                <a href="#examples" class="bg-indigo-700 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-800 transition">查看示例</a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto px-4 py-12">
        <!-- Introduction Section -->
        <section id="intro" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-info-circle text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-semibold">jQuery 简介</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <p class="mb-4">jQuery是由美国人John Resig于2006年创建的一个开源项目，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系。</p>
                    <p class="mb-4">它的主旨是：<span class="font-bold text-indigo-600">以更少的代码，实现更多的功能</span>（Write less, do more）。</p>
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692788911235-ee605a69-52ad-46fc-b5ad-3a8990941018.png" alt="jQuery Logo" class="rounded-lg w-full">
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">jQuery的基本功能</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>访问和操作DOM元素</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>控制页面样式</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>对页面事件的处理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>与Ajax技术的完美结合</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>大量插件在页面中的运用</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Getting Started Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-rocket text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-semibold">快速开始</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">搭建jQuery开发环境</h3>
                    <p class="mb-4">jQuery其实就是一个JavaScript文件，因此，搭建jQuery开发环境十分简单。</p>
                    <p class="mb-4">首先，我们准备了两份jQuery文件：</p>
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692788911504-ab608f4c-8ecf-45d0-bc66-7401b07da29b.png" alt="jQuery files" class="rounded-lg w-full mb-4">
                    <div class="code-block p-4 mb-4 rounded">
                        &lt;script type="text/javascript" src="js/jquery-1.8.2.js"&gt;&lt;/script&gt;
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">jQuery的HelloWorld</h3>
                    <p class="mb-4">当页面加载时，自动弹出"老黄手把手教你来学jQuery"</p>
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692788911766-830ef908-e882-470d-a8bc-f168e34834e1.png" alt="jQuery ready example" class="rounded-lg w-full mb-4">
                    <div class="code-block p-4 mb-2 rounded">
                        $(document).ready(function(){<br>
                        &nbsp;&nbsp;// 你的代码<br>
                        })
                    </div>
                    <p class="text-sm text-gray-600 mb-4">类似于 window.onload = function(){}</p>
                    
                    <h4 class="font-semibold mt-4 mb-2 text-gray-700">区别：</h4>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-angle-right text-indigo-500 mt-1 mr-2"></i>
                            <span>执行时间不同：$(document).ready在页面框架下载完毕后就执行；而window.onload必须在页面全部加载完毕（包含图片下载）后才能执行。</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-angle-right text-indigo-500 mt-1 mr-2"></i>
                            <span>执行数量不同：$(document).ready可以重复写多个，并且每次执行结果不同；而window.onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出</span>
                        </li>
                    </ul>
                    <p class="mt-4">$(document).ready(function(){})可以简写成$(function(){})</p>
                </div>
            </div>
        </section>

        <!-- Selectors Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-mouse-pointer text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-semibold">jQuery选择器</h2>
            </div>
            
            <div class="bg-white p-6 rounded-lg shadow-sm mb-8 card">
                <p>在页面中为某个元素添加样式或事件时，必须先准确地找到该元素——在jQuery库中，可以通过选择器实现这一重要的核心功能。</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">基本选择器</h3>
                    <p class="mb-4">基本选择器是jQuery中使用最频繁的选择器，它由元素ID、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找</p>
                    <div class="code-block p-4 rounded mb-4">
                        $("#id")<br>
                        $(".class")<br>
                        $("element")<br>
                        $("*")<br>
                        $("selector1, selector2")
                    </div>
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692788912054-0612dbfb-d2c9-4da6-81f5-fb615d1d5bfa.png" alt="Basic selector example" class="rounded-lg w-full">
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">层次选择器</h3>
                    <p class="mb-4">层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素</p>
                    <div class="code-block p-4 rounded mb-4">
                        $("parent > child")<br>
                        $("ancestor descendant")<br>
                        $("prev + next")<br>
                        $("prev ~ siblings")
                    </div>
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692788912909-3f5b8ce0-80e9-4c48-a8fe-9a58a3a17f7a.png" alt="Hierarchy selector example" class="rounded-lg w-full">
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">过滤选择器</h3>
                    <p class="mb-4">过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头</p>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-700">简单过滤器</h4>
                            <div class="code-block p-3 rounded text-sm">
                                :first, :last, :even, :odd, :eq(n), :gt(n), :lt(n)
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700">内容过滤器</h4>
                            <div class="code-block p-3 rounded text-sm">
                                :contains(text), :empty, :has(selector), :parent
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700">属性过滤器</h4>
                            <div class="code-block p-3 rounded text-sm">
                                [attribute], [attribute=value], [attribute!=value]
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700">表单选择器</h4>
                            <div class="code-block p-3 rounded text-sm">
                                :input, :text, :password, :radio, :checkbox
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- DOM Manipulation Section -->
        <section class="mb-16" id="examples">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-code text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-semibold">jQuery操作DOM</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">元素属性操作</h3>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">获取元素属性：</h4>
                        <div class="code-block p-3 rounded">
                            var src = $("img").attr("src");
                        </div>
                    </div>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">设置元素属性：</h4>
                        <div class="code-block p-3 rounded">
                            $("img").attr("src", "new_image.jpg");
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">删除元素属性：</h4>
                        <div class="code-block p-3 rounded">
                            $("img").removeAttr("alt");
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">元素内容和值</h3>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">获取和设置元素内容：</h4>
                        <div class="code-block p-3 rounded mb-2">
                            var html = $("#div").html();<br>
                            $("#div").html("&lt;p&gt;New content&lt;/p&gt;");
                        </div>
                        <div class="code-block p-3 rounded">
                            var text = $("#div").text();<br>
                            $("#div").text("New text content");
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">获取和设置元素值：</h4>
                        <div class="code-block p-3 rounded">
                            var val = $("input").val();<br>
                            $("input").val("New value");
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-8 grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">元素样式(CSS)操作</h3>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">直接设置样式：</h4>
                        <div class="code-block p-3 rounded">
                            $("p").css("color", "red");<br>
                            $("p").css({"color": "red", "font-size": "20px"});
                        </div>
                    </div>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">增加/删除CSS类：</h4>
                        <div class="code-block p-3 rounded">
                            $("p").addClass("highlight");<br>
                            $("p").removeClass("highlight");
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">切换CSS类：</h4>
                        <div class="code-block p-3 rounded">
                            $("p").toggleClass("highlight");
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">元素节点操作</h3>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">创建元素节点：</h4>
                        <div class="code-block p-3 rounded">
                            var newDiv = $("&lt;div&gt;&lt;p&gt;New element&lt;/p&gt;&lt;/div&gt;");<br>
                            $("body").append(newDiv);
                        </div>
                    </div>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">遍历元素：</h4>
                        <div class="code-block p-3 rounded">
                            $("li").each(function(index) {<br>
                            &nbsp;&nbsp;console.log(index + ": " + $(this).text());<br>
                            });
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Events Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-bolt text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-semibold">jQuery事件</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">事件机制</h3>
                    <p class="mb-4">事件冒泡现象：事件在触发后分为两个阶段，一个是捕获（Capture），另一个则是冒泡（Bubbling）。所谓的冒泡其实质就是事件执行中的顺序。</p>
                    <div class="code-block p-4 rounded mb-4">
                        $("button").click(function(e) {<br>
                        &nbsp;&nbsp;e.stopPropagation(); // 阻止冒泡<br>
                        &nbsp;&nbsp;// 或者 return false;<br>
                        });
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">绑定与解绑事件</h3>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">绑定事件：</h4>
                        <div class="code-block p-3 rounded">
                            // 直接绑定<br>
                            $("button").click(function() {});<br><br>
                            // 使用bind方法<br>
                            $("button").bind("click", function() {});
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">解绑事件：</h4>
                        <div class="code-block p-3 rounded">
                            $("button").unbind("click");
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-8 grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">切换事件</h3>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">hover()方法：</h4>
                        <div class="code-block p-3 rounded">
                            $("div").hover(<br>
                            &nbsp;&nbsp;function() { $(this).addClass("hover"); }, // mouseenter<br>
                            &nbsp;&nbsp;function() { $(this).removeClass("hover"); } // mouseleave<br>
                            );
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">toggle()方法：</h4>
                        <div class="code-block p-3 rounded">
                            $("button").toggle(<br>
                            &nbsp;&nbsp;function() { /* 第一次点击 */ },<br>
                            &nbsp;&nbsp;function() { /* 第二次点击 */ }<br>
                            );
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">事件应用案例</h3>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">表单验证：</h4>
                        <div class="code-block p-3 rounded">
                            $("form").submit(function(e) {<br>
                            &nbsp;&nbsp;if($("input").val() === "") {<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;alert("请填写必填字段");<br>
                            &nbsp;&nbsp;}<br>
                            });
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Animation Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-film text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-semibold">jQuery动画</h2>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">显示与隐藏</h3>
                    <div class="code-block p-4 rounded mb-4">
                        $("div").show();<br>
                        $("div").hide();<br>
                        $("div").toggle();
                    </div>
                    <p class="text-sm text-gray-600">可以添加参数控制动画速度和回调函数</p>
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">滑动效果</h3>
                    <div class="code-block p-4 rounded mb-4">
                        $("div").slideDown();<br>
                        $("div").slideUp();<br>
                        $("div").slideToggle();
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">淡入淡出</h3>
                    <div class="code-block p-4 rounded mb-4">
                        $("div").fadeIn();<br>
                        $("div").fadeOut();<br>
                        $("div").fadeTo(0.5); // 指定透明度
                    </div>
                </div>
            </div>
            
            <div class="mt-8 bg-white p-6 rounded-lg shadow-sm card">
                <h3 class="text-xl font-semibold mb-4 text-indigo-600">自定义动画</h3>
                <div class="code-block p-4 rounded mb-4">
                    $("div").animate({<br>
                    &nbsp;&nbsp;width: "200px",<br>
                    &nbsp;&nbsp;height: "100px",<br>
                    &nbsp;&nbsp;fontSize: "50px"<br>
                    }, 3000); // 3秒完成
                </div>
            </div>
        </section>

        <!-- AJAX Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-exchange-alt text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-semibold">jQuery Ajax</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">加载数据</h3>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">load()方法：</h4>
                        <div class="code-block p-3 rounded">
                            $("#content").load("data.html");
                        </div>
                    </div>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">getJSON()方法：</h4>
                        <div class="code-block p-3 rounded">
                            $.getJSON("data.json", function(data) {<br>
                            &nbsp;&nbsp;// 处理数据<br>
                            });
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">getScript()方法：</h4>
                        <div class="code-block p-3 rounded">
                            $.getScript("script.js");
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-sm card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">与服务器交互</h3>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">$.get()方法：</h4>
                        <div class="code-block p-3 rounded">
                            $.get("server.php", {name: "John"}, function(data) {<br>
                            &nbsp;&nbsp;// 处理返回数据<br>
                            }, "json");
                        </div>
                    </div>
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-700 mb-2">$.post()方法：</h4>
                        <div class="code-block p-3 rounded">
                            $.post("server.php", {name: "John"}, function(data) {<br>
                            &nbsp;&nbsp;// 处理返回数据<br>
                            });
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">表单序列化：</h4>
                        <div class="code-block p-3 rounded">
                            var formData = $("form").serialize();<br>
                            $.post("server.php", formData);
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-8 bg-white p-6 rounded-lg shadow-sm card">
                <h3 class="text-xl font-semibold mb-4 text-indigo-600">$.ajax()方法</h3>
                <div class="code-block p-4 rounded mb-4">
                    $.ajax({<br>
                    &nbsp;&nbsp;url: "server.php",<br>
                    &nbsp;&nbsp;type: "POST",<br>
                    &nbsp;&nbsp;data: {name: "John"},<br>
                    &nbsp;&nbsp;beforeSend: function() {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;// 发送请求前执行<br>
                    &nbsp;&nbsp;},<br>
                    &nbsp;&nbsp;success: function(data) {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;// 请求成功处理<br>
                    &nbsp;&nbsp;},<br>
                    &nbsp;&nbsp;error: function() {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;// 请求失败处理<br>
                    &nbsp;&nbsp;},<br>
                    &nbsp;&nbsp;complete: function() {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;// 请求完成执行(无论成功或失败)<br>
                    &nbsp;&nbsp;}<br>
                    });
                </div>
            </div>
        </section>

        <!-- jQuery Mind Map -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-project-diagram text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-semibold">jQuery知识导图</h2>
            </div>
            
            <div class="bg-white p-6 rounded-lg shadow-sm">
                <div class="mermaid">
                    graph TD
                    A[jQuery核心] --> B[选择器]
                    A --> C[DOM操作]
                    A --> D[事件处理]
                    A --> E[动画效果]
                    A --> F[Ajax]
                    
                    B --> B1[基本选择器]
                    B --> B2[层次选择器]
                    B --> B3[过滤选择器]
                    B --> B4[表单选择器]
                    
                    C --> C1[属性操作]
                    C --> C2[内容操作]
                    C --> C3[样式操作]
                    C --> C4[节点操作]
                    
                    D --> D1[事件绑定]
                    D --> D2[事件冒泡]
                    D --> D3[事件委托]
                    D --> D4[事件切换]
                    
                    E --> E1[显示/隐藏]
                    E --> E2[滑动]
                    E --> E3[淡入淡出]
                    E --> E4[自定义动画]
                    
                    F --> F1[加载数据]
                    F --> F2[GET/POST]
                    F --> F3[表单序列化]
                    F --> F4[$.ajax]
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="text-center">
                <h3 class="text-xl font-medium mb-2">技术小馆</h3>
                <a href="http://www.yuque.com/jtostring" class="text-indigo-400 hover:text-indigo-300 transition duration-300">http://www.yuque.com/jtostring</a>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Simple tab functionality
        document.addEventListener('DOMContentLoaded', function() {
            // This would be enhanced with jQuery in a real implementation
            const tabs = document.querySelectorAll('.tab-trigger');
            const tabContents = document.querySelectorAll('.tab-content');
            
            if(tabs.length > 0) {
                tabs.forEach(tab => {
                    tab.addEventListener('click', function() {
                        // Remove active class from all tabs and contents
                        tabs.forEach(t => t.classList.remove('active'));
                        tabContents.forEach(c => c.classList.remove('active'));
                        
                        // Add active class to clicked tab and corresponding content
                        this.classList.add('active');
                        const target = this.getAttribute('data-target');
                        document.getElementById(target).classList.add('active');
                    });
                });
            }
        });
    </script>
</body>
</html>
```